<template>
  <div class="protectionbuild-data">
    <el-card>
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <el-form ref="form" :model="fileForm" label-width="100px">
        <el-form-item label="举报地址">
          <el-input v-model="fileForm.reportaddr" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="所在镇街">
          <el-select v-model="fileForm.twonStreet" placeholder="请选择所在镇街" size="mini" style="width:100%;" id="twonStreet">
            <el-option
              v-for="item in twonStreets"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="举报对象">
          <el-input v-model="fileForm.reportobject" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="举报类型">
          <el-input v-model="fileForm.pollutetype" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="现场描述">
          <el-input v-model="fileForm.pollutedesc" size="mini" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="举报案卷图片">
          <el-upload
            class="upload-demo"
            v-model="fileForm.file"
            action="http://61.181.255.77:17322/bc_hb/uploadDocument"
            multiple
            :on-success="fileSuccessImg"
            :limit="3"
            id="upload"
            ref="upload"
            :data="{'position':centerMap}"
            >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
export default {
  name: 'ProtectionBuild',
  components: {
    ToolsBtn
  },
  data () {
    return {
      toolsData: {
        title: "新建环保案卷",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      fileForm: {
        reportaddr: '',
        twonStreet: '',
        reportobject: '',
        pollutetype: '',
        pollutedesc: ''
      },
      twonStreets: [],
      centerMap: '',
      Image: ''
    }
  },
  created () {
    this.twonstreet();
  },
  methods: {
    onSubmit(){
      const twonStreet = document.getElementById('twonStreet')
      const params = {
        reportaddr: this.fileForm.reportaddr,
        twonStreet: twonStreet.value,
        reportobject: this.fileForm.reportobject,
        pollutetype: this.fileForm.pollutetype,
        pollutedesc: this.fileForm.pollutedesc,
        Image: this.Image,
        caseState: 7
      }
      this.$api.PROTECTION.PROTECTIONADD(params)
      .then(() => {
        this.$message({
          showClose: true,
          message: '新建成功',
          type: 'success'
        });
      })
      .catch(() => {
        this.$message({
          showClose: true,
          message: '新建失败',
          type: 'error'
        });
      })
    },
    // 镇街
    twonstreet(){
       this.$api.LAWMONITORING.STREETTWON()
       .then(res => {
         var arr = []
         for(var i=0;i<res.data.length;i++){
            arr[i] = {};
            arr[i].value = res.data[i].id;
            arr[i].label = res.data[i].township_name;
         }
         this.twonStreets = arr;
       })
       .catch(() => {
          this.$message({
            showClose: true,
            message: '暂无数据',
            type: 'error'
          });
       })
    },
    fileSuccessImg(res){
      // this.Image.push(res)
      this.Image = res
    },
    handler ({BMap}) {
      var current=''
      var geolocation = new BMap.Geolocation();
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              const p_x = r.point.lng
              const p_y = r.point.lat
              const geoc = new BMap.Geocoder();
              const pt = new BMap.Point(p_x, p_y);
              geoc.getLocation(pt, function (rs) {
                const addComp = rs.addressComponents;
                current = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
              })
          }
          else {
              alert('failed' + this.getStatus());
          }
          setTimeout(function(){
            this.centerMap = current
          },100)
          
      }, { enableHighAccuracy: true })
    },
    // 新增数据
    addData() {
      // console.log("新 增");
      this.handleEdit();
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      // console.log("搜索");
    },
    // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>

</style>